<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document<title>
</head>
<body>
    <input type="text">
    <button id="insert-btn">新增</button>
    <ul>
        <!-- js添加 -->
    </ul>

    <script>

        var inp = document.querySelector('input');
        var insertBtn = document.querySelector('#insert-btn');
        var ul = document.querySelector('ul');

        insertBtn.addEventListener('click', function () {
            // 创建li
            var li = document.createElement('li');
            // 拿inp的值扔到li上面
            li.innerText = inp.value;
            // 把li加到ul中
            ul.appendChild(li);
            // 清空inp的值
            inp.value = '';

            // 创建删除按钮
            var removeBtn = document.createElement('button');
            // 给删除按钮加上字
            removeBtn.innerText = '删除';
            // 把删除按钮加到li中
            li.appendChild(removeBtn);
            // 给删除按钮注册事件
            removeBtn.addEventListener('click', function () {
                // 删除li
                li.remove();
            });
        });

    </script>

</body>
</html>
